<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Themes</title>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="header">
    <div class="header-top"></div>
    <div class="container">
        <div class="row" style="padding-top: 50px">
            <div class="col-md-6 text-center">
                <span>Themes</span>
            </div>
            <div class="col-md-6 text-center">
                <span class="col-md-2">Themes</span>
                <span class="col-md-2">About</span>
                <span class="col-md-2">FAQ</span>
            </div>
        </div>
    </div>
</div>
<div class="banner">
    <div class="container">
        <div class="row">
            <div class="col-md-12 mb-12 text-center">
                    <img style="height: 144px;width: 144px;margin-top: 57px" src="images/b_03.jpg" class="card-img-top" alt="">
                    <div class="card-body">
                        <h4 class="card-title">Themes</h4>
                        <p class="card-text">Customize and extend</p>
                        <a href="#" class="btn">Explore</a>
                    </div>
            </div>
        </div>
    </div>
</div>
<div class="main">
    <div class="container">
        <div class="row">
            <div class="col-md-4 mb-4 text-center">
                <img src="images/main-1_03.jpg" class="" alt="">
                    <div class="card-body">
                        <h5>Components and examples</h5>
                        <p class="card-text">Each theme featurres new components</p>
                    </div>
            </div>
            <div class="col-md-4 mb-4 text-center">
                <img src="images/main-2_03.jpg" class="" alt="">
                <div class="card-body">
                    <h5>Tons of variables</h5>
                    <p class="card-text">Theame components inheris much</p>
                </div>
            </div>
            <div class="col-md-4 mb-4 text-center">
                <img src="images/main-3_03.jpg" class="" alt="">
                <div class="card-body">
                    <h5>Source files and tools</h5>
                    <p class="card-text">Each theme includes components</p>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="footer">
    <div class="container">
        <div class="col-md-12 text-center">
            <h2 style="color: #00adee;padding-top: 42px;font-size: 17px; color:#000;padding-bottom: 52px">Team</h2>
        </div>
        <div class="row">
            <div class="col-md-4 mb-4">
                <div class="card text-center">
                    <img style="width:100%;height: 149px" src="images/insta-2.jpg" alt="">
                    <div class="card-body" style="padding-left: 16px;padding-right: 16px">
                        <img src="images/avatar-fat.jpg" alt="">
                        <p class="card-text" style="padding-top: 28px">Jacob Thornton</p>
                        <p class="card-text">Creator of Bootstrap,engineer at Twitter
                            & Medium.Founder of Bumpers</p>
                        <a href="#" class="btn">View GitHub</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="card text-center">
                    <img style="width:100%;height: 149px" src="images/insta-1.jpg" alt="">
                    <div class="card-body" style="padding-left: 16px;padding-right: 16px">
                        <img src="images/avatar-mdo.jpg" alt="">
                        <p class="card-text" style="padding-top: 28px">Mark Otto</p>
                        <p class="card-text">Design at GitHub.Creator of Bootstrap.
                            Previously at T witter.Huge nerd
                        </p>
                        <a href="#" class="btn">View GitHub</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="card text-center">
                    <img style="width:100%;height: 149px" src="images/insta-3.jpg" alt="">
                    <div class="card-body" style="padding-left: 16px;padding-right: 16px">
                        <img src="images/avatar-dhg.png" alt="">
                        <p class="card-text" style="padding-top: 28px">Dave Gamache</p>
                        <p class="card-text">Design at Twitter & Medium.Starting
                        something new soon;)</p>
                        <a href="#" class="btn">View GitHub</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="footer2">
    <div class="container">
        <div class="row">
            <div class="col-md-5">
                <h5 class="card-title" style="padding-top: 30px;padding-left: 25px">C'mon,check out the themes</h5>
                <p class="card-text" style="padding-bottom: 30px">Now you know what we're about,so peep the goods</p>
            </div>
            <div class="col-md-7 text-right">
                <a href="#" class="btn">Explore</a>
            </div>
        </div>
    </div>
</div>
<div class="footer3">
    <div class="container p-5">
                <a href="" class="pl-3 pr-3">About</a>
                <a href="" class="pl-3 pr-3">Terms</a>
                <a href="" class="pl-3 pr-3">Privacy</a>
                <a href="" class="pl-3 pr-3">Licenses</a>
                <a href="" class="pl-3 pr-3">FAQ</a>
                <a href="" class="pl-3 pr-3">Bootstrap</a>
        </div>
    </div>
</div>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.slim.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

</body>
</html>